<!DOCTYPE html>
<html height="auto">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>骡窝窝问答</title>
    <meta name="viewport"
          content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui,viewport-fit=cover">
    <meta name="format-detection" content="telephone=no,address=no">
    <link href="/css/mobile+css+head_mobile+css+ui^YVw^1526627473.css" rel="stylesheet" type="text/css">
    <link href="/css/new_ask2016.css" rel="stylesheet" type="text/css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/plugins/form/jquery.form.js"></script>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script>
        $(function () {
            //当前页
            var currentPage = 1;
            //总页数
            var pages;
            //是否查询的标记
            var loading = false;
            //用户存储游记的数组容器
            var travelData = [];
            //查询方fa
            function query() {
                //如果正在查询就不继续查了,退出
                if (loading) {
                    return;
                }
                //设置为查询状态
                loading = true;
                //根据类型发ajax请求获取对应的数据
                $.get('/questionsAndAnswers/question', {currentPage: currentPage}, function (data) {
                    console.log(data.list);
                    //把查询的数据放到容器中
                    $.merge(travelData, data.list);
                    //将容器封装到属性为list的对象中
                    var json = {list: travelData};
                    //渲染数据
                    $("#questions").renderValues(json,{
                       getHref:function(item,value) {
                           var url = $(item).data("url");
                           $(item).attr('href', url + value);
                       }
                   });
                    //当前页+1
                    currentPage++;
                    //总页数
                    pages = data.pages;
                    //设置为没有在查询  本次查询结束
                    loading = false;
                });
            }

            //默认查询第一页
            query();

            //滚动页面 触发事件 翻页
            $(window).scroll(function () {
                //判断是否滚动到底部了  窗口的高度+文档滚动的高度 大于等于 文档的高度
                if ($(window).height() + $(document).scrollTop() >= $(document).height()) {
                    //如果当前页大于总页数就不查询了
                    if (currentPage <= pages) {
                        //查询
                        query();
                    } else {
                        $(document).dialog({
                            type: 'notice',
                            infoText: '亲,已经到底了. . . .',
                            autoClose: 1500,
                            position: 'bottom'  // center: 居中; bottom: 底部
                        });
                    }
                }
            });
        })
    </script>
</head>

<body>
<div id="pos38"></div>
<header class="MfwHead">
    <div class="LBtn">
        <a class="btn back"
           href="/index.html"
           id="_j_top_history_back"><img src="/img/back.jpg" style="height: 45px"></a>
    </div>
    <div class="CBtn"><h1>骡窝窝问答</h1></div>
    <div class="RBtn">
    </div>
</header>

<section class="ans-list" id="questions">
    <ul class="_j_pager_box"  render-loop="list">
        <li>

            <a data-url="/qaaComment.html?id=" render-key="list.id" render-fun="getHref">

                <h2 render-html="list.title"></h2>
                <div class="clearfix">

                    <div class="user-img clearfix" data-uid="46376914">
                        <p>
                            <img render-src="list.author.headImgUrl">
                        </p>

                        <span  render-html="list.author.nickName"></span>
                        <span>发布于</span>
                        <span class="comment-date" render-html="list.createTime"></span>
                    </div>

                    <div class="ans-nr">
                        <div class="clearfix">
                            <div class="pic"><img render-src="list.coverUrl">
                            </div>
                            <p render-html="list.content.content">
                            </p>
                        </div>
                        <div class="clearfix">
                            <span class="fl-l" render-html="list.region.name"></span>
                        </div>
                    </div>

                </div>

            </a>

        </li>
    </ul>
</section>
<br/>
<br/>
<br/>
<section class="askfoot" style="background-color: #e83e8c">
    <a href="/mine/issue.html" class="btn-que" style="background-color: #e83e8c"><i></i>
        我要提问
    </a>
</section>
</body>
</html>
